<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <el-form-item label="高级选项" prop="tfsFiles">
      <el-form labelWidth="80px" ref="variableForm" :model="variableForm">
        <div
          class="form-row"
          v-for="(item, index) in variableForm.variables"
          :key="item.path"
        >
          <el-form-item
            label="名称"
            style="width: 240px"
            :prop="`variables.${index}.name`"
            :rules="[
              {
                required: true,
                message: '不能为空',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-popover
              v-if="item.id === 'TFS PATHS'"
              placement="bottom"
              width="400"
              trigger="click"
              class="btn-tip"
            >
              <div>TFS PATHS变量以平台配置为准，覆盖流水线变量值</div>
              <el-button type="text" icon="el-icon-warning" slot="reference" />
            </el-popover>
            <el-input
              :disabled="!item.edit"
              v-model.trim="item.name"
              :title="item.name"
            />
          </el-form-item>
          <el-form-item
            label="值:"
            style="width: 240px"
            :prop="`variables.${index}.value`"
            :rules="[
              {
                required: true,
                message: '不能为空',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input
              v-if="!item.isTree"
              :disabled="item.disabled"
              v-model="item.value"
            />
            <el-popover
              placement="bottom-start"
              @show="updataTreeJsonData"
              @hide="cleanTreeJsonData"
              v-else
            >
              <div class="devops-upload-tree-wrapper .w-s-primary">
                <el-tree
                  ref="tfsTree"
                  :data="item.tfsData"
                  :props="item.props"
                  node-key="path"
                  show-checkbox
                  :indent="16"
                  @node-click="
                    (data, node, el) => {
                      toNodeclik(item.id, data, node, el);
                    }
                  "
                  @node-expand="
                    (data, node, el) => {
                      nodeExpand(item.id, data, node, el);
                    }
                  "
                >
                  <div slot-scope="{ data }" style="width: 100%">
                    <div>
                      <span :title="data.name" class="custom-tree-node">
                        &nbsp;(( data,name })
                      </span>
                    </div>
                  </div>
                </el-tree>
              </div>
              <el-input
                slot="reference"
                v-model.trim="item.value"
                placeholder="请选择文件"
              />
            </el-popover>
          </el-form-item>
        </div>
      </el-form>
    </el-form-item>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "Home",
  components: {
    HelloWorld,
  },
});
</script>
